<template>
	<view class="content">
		<view class="title" style="margin-top: 200rpx;">你是？</view>

		<view class="sex-select-line">
			<view @tap="data.sex = 2">
				<view class="sex-select" :class="{active: data.sex == 2 }">
					<image :src="getImageUrl('ic_sex_female.png')"></image>
				</view>
				<view class="sex-name">女士</view>
			</view>
			
			<view @tap="data.sex = 1">
				<view class="sex-select" :class="{active: data.sex == 1 }">
					<image :src="getImageUrl('ic_sex_male.png')"></image>
				</view>
				<view class="sex-name">男士</view>
			</view>
		</view>

		<view class="bottom" style="margin-top: 260rpx;">
			<view class="tip">
				性别确认后无法修复
			</view>
			<view class="btn" @click="next">
				<view class="bin-confirm">确认</view>
				<u-icon name="arrow-rightward" color="#fff" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					device: '478ca4671a993356',
					sex: '',
					nickname: '',
					birthday: '',
					height: '',
					weight: '',
					career: '',
					income: '',
					save_city: '',
					avatar: '',
					phone: '',
					code: '',
					password: '',
				}
			};
		},
		methods: {
			next() {
				if('' == this.data.sex){
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					})
					return
				}
				uni.setStorageSync('registerInfo', this.data);
				uni.navigateTo({
					url: "/pages/register/register1"
				})
			}
		}
	};
</script>

<style lang="scss">
	.content {
		width: 100wh;
		height: 100vh;
		margin: 0 50rpx;
		box-sizing: border-box;

		.title {
			font-weight: bold;
			font-size: 48rpx;
			color: #222;
		}
		
		.bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			
			.tip{
				color: #888;
				font-size: 24rpx;
			}
		
			.btn {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				height: 80rpx;
				background-color: #222;
				border-radius: 10rpx;
		
				.bin-confirm {
					color: white;
					font-size: 24rpx;
				}
			}
		}

		.sex-select-line {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			margin: 50rpx 0;

			.sex-select {
				width: 300rpx;
				height: 300rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 260rpx;
					height: 260rpx;
				}
			}
			
			.active{
				border: 10rpx solid #222;
				border-radius: 50%;
			}
			
			.sex-name {
				font-size: 36rpx;
				color: #555;
				margin-top: 30rpx;
				text-align: center;
			}
		}

	}
</style>